<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html hello world</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
</head>

<body>
<h1>hello world</h1>

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<hr>
<div id="editor">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<button id="btn1">获取html</button>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="blog/assets/js/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#editor');
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create();
    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        alert(editor.txt.html());
        console.log(editor.txt.html());
    }, false);
</script>
<hr>
<div id="text"></div>
<hr>
<h3>富文本 实现文件上传</h3>
<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
<button id="btn2">获取html</button>
<!--<script type="text/javascript" src="blog/assets/js/wangEditor.min.j"></script>-->
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')

    // 配置服务器端地址
    editor.customConfig.uploadImgServer = 'http://localhost:8686/file/uploadImage';

    // 进行下文提到的其他配置
	editor.customConfig.uploadImgHooks = {
    before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
    },
    success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },
    timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },

    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.url
        insertImg(url)

        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
    
}

    editor.create();
    //获取 html 数据
     document.getElementById('btn2').addEventListener('click', function () {
        // 读取 html
        alert(editor.txt.html());
        console.log(editor.txt.html());
    }, false);
</script>

</body>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var type_data=['频率'];
    var X_data=["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
    var Y_data=[{
        // type_data与name保持一致
        name: '频率',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }];

    // 指定图表的配置项和数据
    var option = {
        title: {
            //图标标题
            text: '日志分析图'
        },
        tooltip: {},
        //数据类型
        legend: {
            data: type_data
        },
        // X 坐标轴
        xAxis: {
            data:X_data
        },
        yAxis: {},
        //Y 坐标轴
        series:Y_data
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
<script type="text/javascript">
    console.log("hello world");
    var value="<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><p><br></p>";
    document.getElementById("text").innerHTML=value;

</script>
</html>